<template>
    <van-cell class="comment-item-container">
        <van-image
            slot="icon"
            class="avatar"
            round
            fat="cover"
            :src="comment.aut_photo"
        />
        <div slot="title">
            <div class="title-wrap">
               <span class="name">{{ comment.aut_name }}</span>
               <div class="good-wrap" @click="onLiking">
                   <van-icon :class="{ islike : comment.is_liking }" :name=" comment.is_liking ? 'good-job' : 'good-job-o' " />
                   <span class="count">{{ comment.like_count }}</span>
               </div>
            </div>
            <div class="comment">{{ comment.content }}</div>
            <div class="info-wrap">
                <span class="pubdate">{{ comment.pubdate | dateTime('MM-DD HH:mm') }}</span>
                <van-button round size="small" @click="$emit('reply-click',comment)">{{ comment.reply_count }} 回复</van-button>
            </div>
        </div>
    </van-cell>
</template>

<script>
import { delCommentLikings, addCommentsLikings } from '@/api/comment'
    export default {
        name: 'commentItem',
        props:{
            comment:{
                type: Object,
                required: true
            }
        },
        methods: {
            async onLiking(){
                const commentId = this.comment.com_id.toString()
                if(this.comment.is_liking){
                    // 已点赞，取消点赞
                    await delCommentLikings(commentId)
                    this.comment.like_count--
                }else{
                    // 未点赞，添加点赞
                    await addCommentsLikings(commentId)
                    this.comment.like_count++
                }
                // 更新视图
                this.comment.is_liking = !this.comment.is_liking
            }
        },
    }
</script>

<style lang="less" scoped>
.avatar{
    width: 36px;
    height: 36px;
    margin-right: 14px;
}
.title-wrap{
    display: flex;
    justify-content: space-between;
    .name{
        font-size: 14px;
        color: #406599;
    }
}
.comment{
    font-size: 16px;
    color: #222;
}
.info-wrap{
    display: flex;
    align-items: center;
    .pubdate{
        font-size: 10px;
        margin-right: 10px;
    }
}
.good-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    .count{
        font-size: 14px;
        padding-left: 2px;
    }
}

.islike{
    color: rgb(240, 117, 168);
}
</style>